<template>
	<view class="search-page-wrap bg-primary full box relative flex column" :style="{'--height':statusBarHeight_}">
		<view class="search-wrapper" id="searchWrap">
			<view class="search-inner">
				<image src="../static/icon/search.png" class="search-icon"></image>
				<input @confirm="searchConfirm" class="search-input flex-1" v-model="keyword" placeholder="请输入城市/景点关键词"
					@input="handleInput" />
			</view>
			<view class="cancel-btn" @click="searchConfirm">
				<text>搜索</text>
			</view>
		</view>
		<div class="city-wrap" :style="[cityWrapStyle]" v-show="showCity">
			<scroll-view class="full" scroll-y>
				<view class="serach-list-item" v-for="(item,index) in cityList" :key="index"
					@click.stop="handleChooseCity(item)">{{ item.name }}
				</view>
			</scroll-view>
		</div>
		<view class="history-search">
			<view class="history-label">
				<view class="label-text">
					<text>历史搜索</text>
				</view>
				<image src="../static/icon/delete.png" class="delete-icon" @click="clearCacheHandle"></image>
			</view>
			<template v-if="historySearch.length">
				<view class="search-list-wrap">
					<view class="search-list-item" v-for="(item,index) in historySearch" :key="index"
						@click="clickSearch(item.value)">
						<text>{{ item.value }}</text>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="history-empty">暂无搜索历史...</view>
			</template>
		</view>
		<view class="w-100 flex-1 relative">
			<view class="absolute inset">
				<scroll-view class="full" scroll-y v-if="showRecommend">
					<view class="recommend-line-wrap">
						<view class="line-header">
							<text>推荐线路</text>
						</view>
						<view class="line-list">
							<view class="line-item" v-for="(item,index) in commentList" :key="index"
								@click="toDetail(item.id)">
								<view class="line-image">
									<image :src="item.image" class="full" mode="widthFix"></image>
								</view>
								<view class="line-address">
									<text>{{ item.name }}</text>
								</view>
							</view>
							<view class="empty-wrapper" v-if="recommendEmpty">
								<u-empty text="暂无推荐数据" :icon="sourceUrl + '/data-empty.png'" />
							</view>
						</view>
					</view>
				</scroll-view>
				<scroll-view v-else class="full" scroll-y>
					<view class="line-list active">
						<view class="line-item" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
							<view class="line-image">
								<image :src="item.image" class="full" mode="widthFix"></image>
							</view>
							<view class="line-address">
								<text>{{ item.name }}</text>
							</view>
						</view>
						<view class="empty-wrapper" v-if="isEmpty">
							<u-empty text="暂无搜索结果" :icon="sourceUrl + '/data-empty.png'" />
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { LOAD_MORE } from '@/constant/index.js'
	import { mapGetters } from 'vuex'
	export default {
		computed: {
			...mapGetters(['historySearch']),
			cityWrapStyle() {
				return {
					'--top-value': this.topValue,
				}
			}
		},
		onLoad(ev) {
			const { event } = ev
			if (event) this.event = event
		},
		onReady() {
			let selector = uni.createSelectorQuery().in(this)
			selector.select('#searchWrap').boundingClientRect().exec(([target]) => {
				this.topValue = target.height + 'px'
				selector = null
			})
		},
		created() {
			this.initRecomment()
		},
		methods: {
			handleInput(ev) {
				const { value } = ev.detail
				if (this.timerId) {
					clearTimeout(this.timerId)
					this.timerId = null
				}
				if (!value) {
					this.showCity = false
					return
				}
				this.timerId = setTimeout(() => {
					this.handleSearchCity(value)
				}, 300)
				console.log(ev, 'ev');
			},
			async handleSearchCity(keyword) {
				const resp = await this.$request({
					url: "/ProductLine/getLineLists",
					data: { page: 1, list_rows: 50, line_name: keyword },
				})
				const { data } = resp
				if (!data.data) data.data = []
				const { is_city, city_data } = data

				// 搜索到城市数据
				if (is_city) {
					this.generateCityData(city_data)
				} else {
					this.showCity = false
				}
			},
			async getTargetCityLineData(city_id) {
				uni.showLoading({
					title: "正在获取",
					mask: true
				})
				const resp = await this.$request({
					url: "/ProductLine/getLineLists",
					data: { page: 1, list_rows: 50, city_id },
				})
				if (!resp.data.data) resp.data.data = []
				const { data: list } = resp.data
				this.list = list.map(item => {
					const { cover_image: image, id, line_name: name } = item
					return { image, id, name }
				})
				this.isEmpty = this.list.length === 0
				await this.$delay(300)
				uni.hideLoading()
				this.showRecommend = false
			},
			handleChooseCity(rowItem) {
				const { id } = rowItem
				this.getTargetCityLineData(id)
				this.showCity = false
				// const { event } = this
				// if (!!event) uni.$emit(event, rowItem)
				// uni.navigateBack()
			},
			clickSearch(value) {
				this.keyword = value
				this.searchData(true)
			},
			generateCityData(cityData) {
				if (!cityData) return
				const keys = Object.keys(cityData)
				const result = []
				keys.forEach(k => {
					const item = cityData[k]
					if (item && item.length) result.push(...item)
				})
				if (result.length) {
					this.showCity = true
					this.cityList = result
				}
				console.log(result, '城市列表');
			},
			async searchData(clear = false) {
				console.log('searchData');
				if (clear) {
					this.page = 1
					this.status = LOAD_MORE.LOADING
					this.isEmpty = false
					this.list = []
				}
				if (this.status === LOAD_MORE.NO_MORE) return
				this.status = LOAD_MORE.LOADING
				this.showRecommend = false
				uni.showLoading({
					title: '正在搜索',
					mask: true
				})
				const { page, pageSize, keyword } = this
				const resp = await this.$request({
					url: "/ProductLine/getLineLists",
					data: { page, list_rows: 50, line_name: keyword },
				})
				await this.$delay(100)
				const { code, data, msg, } = resp
				if (code !== 1) {
					this.status = LOAD_MORE.LOAD_MORE
					return this.$toast({ title: msg })
				}
				if (!data.data) data.data = []
				const { total, data: list, is_city, city_data } = data
				this.list.push(...list.map(item => {
					const { cover_image: image, id, line_name: name } = item
					return { image, id, name }
				}))
				// 搜索到城市数据
				if (is_city) {
					this.generateCityData(city_data)
				} else {
					this.showCity = false
				}
				uni.hideLoading()
				this.isEmpty = this.list.length === 0
				if (this.loading) this.loading = false
				const hasMore = page * pageSize < total
				this.showLoading = true
				if (hasMore) {
					this.page += 1
					this.status = LOAD_MORE.LOAD_MORE
					return
				}
				this.status = LOAD_MORE.NO_MORE
			},
			searchConfirm() {
				const { keyword } = this
				if (!keyword.length) {
					this.showCity = false
					this.cityList = []
					return this.$toast({ title: '请输入关键字' })
				}
				this.$store.commit('addSearchItem', keyword)
				this.searchData(true)
			},
			clearCacheHandle() {
				if (!this.historySearch.length) return this.$toast({ title: '无搜索记录' })
				uni.showModal({
					title: '提示',
					content: '您确定要清空搜索记录吗?',
					success: async ev => {
						if (ev.cancel) return
						uni.showLoading({
							title: '请稍等',
							mask: true,
						})
						await this.$delay(300)
						uni.hideLoading()
						this.$store.commit('clearSearch')
					}
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages-bundle/line-detail/line-detail?id=' + id
				})
			},
			backHandle() {
				uni.navigateBack()
			},
			async initRecomment() {
				const resp = await this.$request({
					url: "/ProductLine/getLineLists",
					data: { page: 1, list_rows: 30, is_tuijian: 1 },
				})
				const { code, data } = resp
				if (code !== 1) {
					this.recommendEmpty = true
					return
				}
				if (!data.data) data.data = []
				const { data: list } = data
				this.commentList.push(...list.map(item => {
					const { cover_image: image, id, line_name: name } = item
					return { image, id, name }
				}))
				this.recommendEmpty = !this.commentList.length
				console.log(resp, 'resp');
			},
		},
		data() {
			return {
				page: 1,
				pageSize: 15,
				list: [],
				status: LOAD_MORE.LOAD_MORE,
				isEmpty: true,
				commentList: [],
				recommendEmpty: false,
				keyword: '',
				showLoading: false,
				showRecommend: true,
				noData: false,
				showCity: false,
				cityList: [],
				topValue: "",
				event: "",
				timerId: null,
			};
		}
	}
</script>

<style lang="scss" scoped>
	.search-page-wrap {
		padding-bottom: env(safe-area-inset-bottom);

		.city-wrap {
			position: absolute;
			left: 0;
			right: 0;
			width: 750rpx;
			bottom: 0;
			top: var(--top-value);
			background: #ffffff;
			z-index: 3;

			.serach-list-item {
				padding: 24rpx;
				box-sizing: border-box;
				color: #626262;
				font-size: 30rpx;
				line-height: 1;
				border-bottom: 1px solid #e3e3e3;

			}
		}

		.history-empty {
			font-size: 28rpx;
			color: #909399;
			padding: 24rpx 0;
		}

		.line-list {
			box-sizing: border-box;
			margin-top: 24rpx;

			&.active {
				padding: 0 32rpx;
			}

			.line-item {
				width: 100%;
				height: 378rpx;
				border-radius: 16rpx;
				overflow: hidden;
				position: relative;
				margin-bottom: 24rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.line-address {
					position: absolute;
					left: 16rpx;
					bottom: 16rpx;
					height: 40rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					font-weight: bold;
					line-height: 40rpx;
				}

				.line-image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.recommend-line-wrap {
			padding: 48rpx 32rpx 0;

			.line-header {
				height: 44rpx;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.9);
				font-weight: bold;
				line-height: 44rpx;
			}
		}

		.search-list-wrap {
			margin-top: 24rpx;
			display: flex;
			flex-flow: row wrap;
			gap: 24rpx 32rpx;

			.search-list-item {
				padding: 14rpx 38rpx;
				font-size: 22rpx;
				color: rgba(0, 0, 0, 0.6);
				border-radius: 100rpx;
				box-sizing: border-box;
				background: #ffffff;
			}
		}

		.now-search {
			margin-top: 48rpx;


			.now-label {
				height: 44rpx;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.9);
				font-weight: bold;
				line-height: 44rpx;
			}
		}

		.history-search {
			margin-top: 32rpx;
			box-sizing: border-box;
			padding: 0 32rpx;

			.history-label {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.delete-icon {
					width: 38rpx;
					height: 38rpx;
				}

				.label-text {
					height: 44rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.9);
					font-weight: bold;
					line-height: 44rpx;
				}

			}
		}

		.search-wrapper {
			padding: 8rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.search-inner {
				flex: 1;
				margin: 0 20rpx;
				display: flex;
				align-items: center;
				padding: 12rpx 42rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 40rpx 40rpx;

				.search-icon {
					width: 32rpx;
					height: 32rpx;
				}

				.search-input {
					height: 40rpx;
					font-size: 24rpx;
					// color: #999999;
					color: rgba(0, 0, 0, .9);
					line-height: 40rpx;
					margin-left: 20rpx;

				}
			}

			.cancel-btn {
				font-size: 28rpx;
				color: #666666;
			}

			.back-icon {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.status-bar {
			width: 100%;
			height: var(--height);
		}
	}
</style>